<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas文字粒子特效</title>
<meta name="keywords" content="SVG特效, 手机微信网站特效, css3动画, html5特效, 网页特效" />
<meta name="description" content="A5源码-专注于HTML5、CSS3、js、jQuery、手机移动端等网页特效的手机与分享。特效库始终坚持：无会员、无积分、无限制的“三无原则”，所有的资源都免费提供广大童鞋下载学习和使用。" />
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
   <canvas id="canvas"></canvas>
   
   <div id="control">
     
      <div>
        <h1>文字粒子</h1>
        <p style="margin: 0 0 20px 10px;">
          <span id="ball">圆形</span>
          <span id="rect">方块</span>
        </p>
        <p>文字</p>
        <input type="text" id="message" value="A5源码" onchange="change()">
        <p>重力</p>
        <input type="range" id="gra" value="0" min="-1" max="1" step="0.1" onchange="changeV()">
        <p>周期</p>
        <input type="range" id="dur" value="0.4" min="0.1" max="0.99" step="0.01" onchange="changeV()">
        <p>速度</p>
        <input type="range" id="speed" value="0.1" min="0" max="5" ste="0.01" onchange="changeV()">
        <p>半径</p>
        <input type="range" id="rad" value="2" min="1.8" max="20" step="0.1" onchange="changeV()">
        <p>分辨率</p>
        <input type="range" id="res" value="10" min="3" max="20" step="1" onchange="change()">
      </div>
    
       <div id="btn">
         <span></span>
         <span></span>
         <span></span>
       </div>

   </div>
   <p id="tips">*** 点击菜单按钮，滑出侧边栏，进行参数控制 ***</p>

   <script src="js/sidebar.js"></script>
   <script src="js/utils.js"></script>
   <script src="js/particles.js"></script>
   <script src="js/shape.js"></script>
   <script src="js/index.js"></script>
</body>
</html>